<template>
  <svg class="icons"
  >
    <use :xlink:href="'#i-'+type"/>
  </svg>
</template>

<script>
  import {mapMutations, mapActions, mapGetters} from 'vuex';

  export default {
    props: {
      type: {
        type: String,
        default: 'home'
      }
    },
    computed: {
      ...mapGetters('iconfont', ['needLoad']),
    },
    methods: {
      ...mapActions('iconfont', ['hasSetIconFontScriptTag']),
      ...mapMutations('iconfont', ['ICONS_LOADED'])
    },
    created() {
      // 创建一个
      if (process.client && this.needLoad) {
        const iconfont = document.createElement('script');
        iconfont.src = '//at.alicdn.com/t/font_1751569_7mc7frp8z0d.js';
        document.body.appendChild(iconfont);
        this.ICONS_LOADED()
      }
    }
  };
</script>

<style scoped>
  .icons {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor; /* fill用currentColor则会自动匹配当前的color属性值 */
    overflow: hidden;
  }
</style>
